<template>

    <el-input v-model="input" style="width: 240px" placeholder="药品编号 例：YP001" />
    <el-button type="primary" @click="inquire">查询</el-button>

    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column property="code" label="药品编号" width="120" />
        <el-table-column property="drugname" label="药品名称" show-overflow-tooltip />
        <el-table-column property="drugdetail" label="功效" width="120" />
        <el-table-column label="图片">
            <template #default="scope">
                <img :src="scope.row.images" style="width: 100px; height: auto;" />
            </template>
        </el-table-column>
        <el-table-column property="price" label="价格" show-overflow-tooltip />

        <el-table-column label="数量">
            <template #default="scope">
                <el-input-number v-model="num[scope.$index]" :min="1" :max="1000"
                    @change="addNumbe(scope.$index, scope.row)" />
            </template>
        </el-table-column>


        <!-- 操作 -->
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                <el-upload class="avatar-uploader" action="http://localhost:8080/medicine/uploads" name="uploadFiles"
                    :show-file-list="false" :on-success="handleAvatarSuccess" @click="huoquID = scope.row.id">
                    <el-button size="small">上传文件</el-button>
                </el-upload>

                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">加入购物车</el-button>
            </template>
        </el-table-column>

    </el-table>

    <div style="margin-top: 20px">
        <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">结算</el-button> -->
        <el-button @click="toggleSelection()">加入购物车</el-button>
    </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { ElTable, ElUpload, UploadProps } from 'element-plus'
import axios from 'axios';

interface User {
    id: number
    code: string
    drugdetail: string
    drugname: string
    price: string
    quantity: string
    images: string
    folderName: string;//文件夹名称
    filename: string;//文件名
}
//定义新的方法
const input = ref("")
const num = ref([]);
const tableData = ref<User[]>([]);
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])

// 查询
const inquire = () => {
    axios({
        method: "post",
        url: `http://localhost:8080/findme`,
        headers: {
            "Content-Type": "application/json",
        },
        data: { code: input.value },
    }).then((res) => {
        console.log(res)
        tableData.value = res.data.data;
        num.value = res.data.data.map(i => 1);
    }).catch((err) => {
        console.log(
            "err.response.data",
            err.response,
            err.response.data,
            err.response.data.data,
            err.response.data.msg
        );
    });
}

// 结算
const toggleSelection = (rows?: User[]) => {
    console.log(multipleSelection.value)
    multipleSelection.value.forEach(item => {
        console.log(item.id, item.code)
    })
}


const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}


const addNumbe = (index: number, row: User) => {

}

// 查看
const handleEdit = (index: number, row: User) => {
    console.log(index, row)
}


// 加入购物车
const handleDelete = (index: number, row: User) => {
    console.log(row.id, num.value[index])
    axios({
        method: "post",
        url: `http://localhost:8080/insertShopping`,
        headers: {
            "Content-Type": "application/json",
        },
        data: { drugld: row.id, quantity: num.value[index] },
    }).then((res) => {
        console.log(res);
    }).catch((err) => {
        console.log(
            "err.response.data",
            err.response,
            err.response.data,
            err.response.data.data,
            err.response.data.msg
        );
    });

}

const huoquID = ref(0)
//图片上传
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    console.log(response, uploadFile)
    console.log(URL.createObjectURL(uploadFile.raw!))
    // 修改图片url
    axios({
        method: "post",
        url: "http://localhost:8080/updateImage",
        headers: {
            "Content-Type": "application/json",
        },
        data: {
            id: huoquID.value,
            images: response[0]
        }
    }).then((res) => {
        location.reload();
    }).catch((err) => {
        console.log(
            "err.response.data",
            err.response,
            err.response.data,
            err.response.data.data,
            err.response.data.msg
        );
    });
}

// 初始化数据
const initData = () => {
    axios({
        method: "get",
        url: `http://localhost:8080/me`,
        headers: {
            "Content-Type": "application/json",
        },
        data: {},
    }).then((res) => {
        console.log(res)
        //更新表格数据
        tableData.value = res.data.data;

        //初始化药品数量
        num.value = res.data.data.map(i => 1);
        // 更新每个药品对象中的图片 URL
        // tableData.value.forEach((item) => {
        //     // 调用图片接口获取图片 URL
        //     axios.get(`http://localhost:8080/image/${item.folderName}/${item.filename}`)
        //         .then((response) => {
        //             // 更新药品对象中的图片 URL
        //             item.images = response.data;
        //         })
        //         .catch((error) => {
        //             console.error("获取图片时发生错误:", error);
        //         });
        // });
    }).catch((err) => {
        console.log(
            "err.response.data",
            err.response,
            err.response.data,
            err.response.data.data,
            err.response.data.msg
        );
    });
}
initData();
</script>
